<template>
  <div class="login_container">
    <Navbar></Navbar>
    <div class="login_container_section" :style="{ height: winHeight}">
      <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
               label-width="0px"
               class="card-box login-form">
        <div style="width: 100%;height: 1px"></div>
        <div class="login_back">
          <p class="title">武警军事训练学科网站登录</p>
          <!--账号-->
          <el-form-item prop="username">
            <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入账号"/>
          </el-form-item>
          <!--验证码-->
          <el-form-item prop="password">
            <div class="password_code">
              <el-input name="password" type="password" @keyup.enter.native="handleLogin"
                        v-model="loginForm.password" autoComplete="on"
                        placeholder="请输入密码">
              </el-input>
            </div>
          </el-form-item>
          <!--按钮-->
          <el-form-item>
            <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
              登录
            </el-button>
          </el-form-item>
          <div class="sign_up">
            <p @click="gotoSignUp">注册</p>
            <p>忘记密码</p>
          </div>
        </div>
      </el-form>
    </div>

    <NavFooter></NavFooter>
  </div>
</template>

<script>
  import { Navbar, NavFooter } from '@/views/layout'
  export default {
    name: 'login',
    components: {
      Navbar,
      NavFooter
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length < 0) {
          callback(new Error('请输入正确的账号'))
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (value.length < 0) {
          callback(new Error('请输入正确的密码'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePass }]
        },
        loading: false,
        // 倒计时
        show: true,
        count: '',
        timer: null,
        winHeight: 0
      }
    },
    created() {

    },
    mounted() {
      this.winHeight = (document.body.clientHeight - 156) + 'px'
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('Login', this.loginForm).then(info => {
              this.loading = false
              this.$router.push({
                path: '/dashboard'
              })
            }).catch(() => {
              this.loading = false
            })
          } else {
            return false
          }
        })
      },
      getCode() {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      },
      gotoSignUp() {
        this.$router.push({
          path: '/signUp'
        })
      }
    }
  }
</script>

<style>
  .login_container_section .el-input {
    width: 450px;
  }

  .login_container_section .el-input__inner {
    background-color: #f0f2f5;
    border: 1px solid #f0f2f5;
    border-radius: 0;
  }

  .login_container_section .el-button--primary {
    background-color: #01540C;
    border: 1px solid #01540C;
    border-radius: 0;
    font-size: 16px;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .login_container {
    height: 100vh;
    background-color: #f1f4f6;
    .login_container_section {
      background-image: url('./../../assets/images/logoBack.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .login_back {
      width: 450px;
      margin: 150px auto 0;
      height: 350px;
      padding: 20px;
      background-color: white;
      position: relative;
      border-radius: 5px;


      .title {
        font-size: 24px;
        color: #333;
        width: 100%;
        text-align: center;
        margin: 40px 0;
      }

      .password_code {
        display: flex;
        justify-content: space-between;
      }
    }
    .sign_up {
      display: flex;
      justify-content: space-between;
      padding: 20px 130px;
      color: #01540C;
      p {
        cursor: pointer;
      }
    }
  }
</style>
